/*
 * @Author: your name
 * @Date: 2020-03-29 15:35:46
 * @LastEditTime: 2020-04-02 22:19:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-imooc-ebook\src\utils\book.js
 */
import { getReadTime } from './localStorage'
import { realPx } from './utils'

export const FONT_SIZE_LIST = [
  { fontSize: 12 }, // 12
  { fontSize: 14 }, // 14
  { fontSize: 16 }, // 16
  { fontSize: 18 }, // 18
  { fontSize: 20 }, // 20
  { fontSize: 22 }, // 22
  { fontSize: 24 } // 24
]
export const FONT_FAMILY = [
  { font: 'Default' },
  { font: 'Cabin' },
  { font: 'Days One' },
  { font: 'Montserrat' },
  { font: 'Tangerine' }
]

export function themeList(vue) {
  return [
    {
      // 别名通过vue实例调用国际化,国际化中英文转化国际化
      alias: vue.$t('book.themeDefault'),
      name: 'default',
      style: {
        body: {
          'color': '#4c5059',
          'background': '#cecece', // #cecece
          'padding-top': `${realPx(38)}px!important`, // 48
          'padding-bottom': `${realPx(38)}px!important`
        }
      }
    },
    {
      alias: vue.$t('book.themeGold'),
      name: 'Gold',
      style: {
        body: {
          'color': '#5c5b56',
          'background': '#c6c2b6',
          'padding-top': `${realPx(38)}px!important`,
          'padding-bottom': `${realPx(38)}px!important`
        }
      }
    },
    {
      alias: vue.$t('book.themeEye'),
      name: 'Eye',
      style: {
        body: {
          'color': '#404c42',
          'background': '#a9c1a9',
          'padding-top': `${realPx(38)}px!important`,
          'padding-bottom': `${realPx(38)}px!important`
        }
      }
    },
    {
      alias: vue.$t('book.themeNight'),
      name: 'Night',
      style: {
        body: {
          'color': '#cecece',
          'background': '#000000',
          'padding-top': `${realPx(38)}px!important`,
          'padding-bottom': `${realPx(38)}px!important`
        }
      }
    }
  ]
}

// 动态切换全局样式,为dom动态添加或删除css文件,我们知道css文件的引入是通过head标签下添加link标签,那么动态添加或删除link标签的实现原理也是一样的.就是找到head标签添加我们自定义的link标签即可.
// 动态添加css,href:css文件的路径
export function addCss(href) {
  // 创建获取link标签
  const link = document.createElement('link')
  // 设置link标签属性,stylesheet:样式表
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('type', 'text/css')
  link.setAttribute('href', href)
  // 获取到head标签后将link标签将link标签添加到head标签后
  document.getElementsByTagName('head')[0].appendChild(link)
}
// 移除前面具有相同href的link
export function removeCss(href) {
  const links = document.getElementsByTagName('link')
  for (let i = links.length; i >= 0; i--) {
    const link = links[i]
    if (link && link.getAttribute('href') && link.getAttribute('href') === href) {
      // 移出某个link标签的方法
      link.parentNode.removeChild(link)
    }
  }
}
// 每次设置全局主题时，将之前的样式全部清除
export function removeAllCss() {
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`)
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`)
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`)
}

// 将阅读时间转化为分钟
export function getReadTimeByMinute(fileName) {
  const readTime = getReadTime(fileName)
  // console.log('readTime')
  // console.log(readTime)
  if (!readTime) {
    return 0
  } else {
    // Math方法的向下取整,分钟。readTime是秒
    return Math.ceil(readTime / 60)
  }
}

// 将目录数组压平
// 扩展运算符...，可以对数组进行拆分操作，可以将1，2数组传入到扩展运算符拆分1，2数组参数序列...[1, 2]，合并
// 拆分后将数组合并[]..concat(),[]和后面拆开的1，2数组合并在一起
// console.log([0].concat(...[1, 2]))
// map()对数组进行遍历
// 递归,将目录树变为扁平
export function flatten(array) {
  return [].concat(...array.map(item => [].concat(item, ...flatten(item.subitems))))
}
// 将两个分散的数组合并成一个数组
// console.log([].concat(...flatten(nav)))
